<template>
	<view>
		
		<block  v-if="order.orderAfterSale&&order.orderAfterSale.length!=0">
			<cooperateAppeal2 :text="text" :order="order" v-if="loading==true"  :afterSalesRecord="afterSalesRecord2" :is_cooperateAppeal_bool3="false"
			:customStyle1="customStyle1" :customStyle11="customStyle11" 
			:customStyle2="customStyle2" :customStyle3="customStyle3">
			</cooperateAppeal2>
		</block>
		
		<block  v-else>
			<orderCommon
				:text="text" :order="order" :afterSalesRecord="afterSalesRecord2" :is_time="false" :is_chat="false"
				:customStyle1="customStyle1" :customStyle11="customStyle11" 
				:customStyle2="customStyle2" :customStyle3="customStyle3">
			</orderCommon>
		</block>
		
		<view class="cardBox" style="margin-top: 10rpx;" v-if="loading">
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="order.join_user.username||order.release_user.username">
				<text style="font-weight: bold;font-size:32rpx;">{{text.submit_user}} </text>
				
				<view v-if="afterSalesRecord2.join_status==1">
					<image :src="IMAGE_URL+order.join_user.avatar" class="close_image2"></image>
					<view style="line-height: 140rpx;float: left;">
						<block v-if="lang==='zh'">{{order.join_user.username}}</block>
						<block v-if="lang==='ru'">{{order.join_user.username_ru}}</block>
					</view>
					<view style="line-height: 140rpx;float: right;" v-if="order.user_id!=order.join_user.id">
						<text @click="lianxi(order.join_user.mobile)" style="background-color: orange;color: #fff;border-radius: 10rpx;padding: 5px 10px;">
							{{ $t('即时联系') }} 
						</text>
					</view>
					
					<view style="clear: both;"></view>
					<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="order.orderAfterSale&&order.orderAfterSale.length!=0">
						{{ $t('您已同意申诉，售后关闭') }}
					</view>
					<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;" v-else>
						{{ $t('您已同意本次售后申请') }}
					</view>
					<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;" v-if="afterSalesRecord2.join_do_time">
						<view style="width: 50%;float: left; text-align: left;" >
							{{timestampToDate(afterSalesRecord2.join_do_time*1000)}}
						</view>
					</view>
					<view style="clear: both;"></view>
				</view>
				
				<view v-else>
					<view v-if="afterSalesRecord2.release_status==1">
						<image :src="IMAGE_URL+order.release_user.avatar" class="close_image2"></image>
						<view style="line-height: 140rpx;float: left;">
							<block v-if="lang==='zh'">{{order.release_user.username}}</block>
							<block v-if="lang==='ru'">{{order.release_user.username_ru}}</block>
						</view>
						<view style="line-height: 140rpx;float: right;" v-if="order.user_id!=order.release_user.id">
							<text @click="lianxi(order.release_user.mobile)" style="background-color: orange;color: #fff;border-radius: 10rpx;padding: 5px 10px;">
								{{ $t('即时联系') }} 
							</text>
						</view>
						
						<view style="clear: both;"></view>
						<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="order.orderAfterSale&&order.orderAfterSale.length!=0">
							{{ $t('对方同意你提交的申诉，售后关闭') }}
						</view>
						<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;" v-else>
							{{ $t('对方同意了你的售后申请') }}
						</view>
						<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;" v-if="afterSalesRecord2.release_do_time">
							<view style="width: 50%;float: left; text-align: left;" >
								{{timestampToDate(afterSalesRecord2.release_do_time*1000)}}
							</view>
						</view>
						<view style="clear: both;"></view>
						
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="cardBox" style="margin-top: 10rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.system}} </text> 
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				{{text.system_show2}}
			</view>
		</view>
		
		
		<view style="height:50px"></view>
		
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import cooperateAppeal2 from './cooperateAppeal2.vue';
	import orderCommon from "./orderCommon.vue"
	
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	export default {
		components:{
			cooperateAppeal2,orderCommon
		},
		props:{
			order:{
				type:Object,
				default:{}
			},
			afterSalesRecord:{
				type:[Object,null],
				default:{}
			},
			text:{
				type:Object,
				default:{}
			},
			customStyle1:{
				type:Object,
				default:{}
			},
			customStyle11:{
				type:Object,
				default:{}
			},
			customStyle2:{
				type:Object,
				default:{}
			},
			customStyle3:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				
				img:HTTP_IMG_UTL+'huangjin.png',
				loading:false,
				subDisabled:false,
				afterSalesRecord2:{}
				
			}
		},
		
		mounted() {
			var that = this
			that.afterSalesRecord2 = that.afterSalesRecord
			that.$u.api.order.afterSalesRecord3({
				aftersales_id: that.order.orderInfo.aftersales_id,
				lang:that.lang
			}).then(result => {
				if(result){
					that.afterSalesRecord2 = result
					console.log(that.afterSalesRecord2)
				}
				that.loading = true
			})
		},
		
		methods:{
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			lianxi(mobile){
				createC2CConversation(mobile, this)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>